<template>
  <div class="cue_content">
    <div
      :contenteditable="!isDis"
      v-html="divMsg"
      :data-placeholder="placeholder || ''"
      @input="dvFocus"
      @focus="cusFocus"
      @blur="cusBlur"
      :class="{
        'is__focus': isFocus,
        'is__hide__border': hideBorder,
        'has__content': hasContent,
      }"
      :style="{ minHeight, height }"
      class="cus__editor"
    ></div>
  </div>
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";

export default defineComponent({
  props: {
    modelValue: String,
    height: String,
    minHeight: String,
    hideBorder: Boolean,
    placeholder: String,
    isDis: Boolean,
  },
  setup(props, { emit }) {
    let divMsg = ref("");
    let isFocus = ref(false);
    let hasContent = ref(false);
    let dvFocus = (e) => {
      divMsg = e.target.innerHTML;
      emit("update:modelValue", e.target.innerHTML);
      hasContent.value = !!e.target.innerHTML;
    };
    let cusFocus = () => {
      isFocus.value = true;
    };
    let cusBlur = () => {
      isFocus.value = false;
    };
    onMounted(() => {
      setTimeout(() => {
        divMsg.value = props.modelValue;
        hasContent.value = !!props.modelValue;
      }, 1000);
    });
    return { divMsg, dvFocus, cusBlur, cusFocus, hasContent, isFocus };
  },
});
</script>
<style lang="scss" scoped>
.cue_content {
  overflow-x: auto;
  overflow-y: auto;
  width: 240px;
  cursor: pointer;
  height: 200px;
}
.cur-num {
  position: relative;
  // top:-20px;
  right: 8px;
  float: right;
}
.cus__editor {
  padding: 9px 12px;
  background: #ffffff;
  overflow: auto;
  border-radius: 4px;
  border: 1px solid #999;
  outline: none;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  user-modify: read-write-plaintext-only;
  -webkit-user-modify: read-write-plaintext-only;
  :deep(img) {
    display: inline-block;
    width: 40px;
    height: 40px;
  }
  &.is__focus {
    border-color: #72b22a;
    &::before {
      display: none;
    }
  }
  &.has__content::before {
    display: none;
  }
  &.is__hide__border {
    padding: 0;
    border-color: rgba($color: #fff, $alpha: 0);
    background: rgba($color: #fff, $alpha: 0);
  }
  &::before {
    content: attr(data-placeholder);
    display: inline;
    pointer-events: none;
    position: absolute;
    color: #999;
  }
}
</style>